<template>
  <a-modal
    v-bind="curOptions"
    v-model:open="curVisible"
    @cancel="curVisible = false"
    @ok="onModalOk"
  >
    <a-form
      ref="form"
      :model="curFormData"
      :labelCol="{ span: 5 }"
      :wrapperCol="{ span: 18 }"
      :rules="curFormRuless"
    >
      <a-form-item key="name" name="name" label="事件名称">
        <a-input
          v-model:value="curFormData.name"
          placeholder="请填写事件名称"
        />
      </a-form-item>

      <a-form-item key="code" name="code" label="事件标识">
        <a-input
          v-model:value="curFormData.code"
          placeholder="请填写事件标识"
        />
      </a-form-item>

      <a-form-item key="isModel" name="isModel" label="是否是绑定事件">
        <a-switch
          v-model:checked="curFormData.isModel"
          checkedChildren="是"
          unCheckedChildren="否"
        />
      </a-form-item>

      <a-form-item label="事件参数">
        <a-form-item-rest>
          <BwEmitParams
            ref="emitParam"
            :value="curFormData.params"
            @add="onAddParam"
            @delete="onDelParam"
          />
        </a-form-item-rest>
      </a-form-item>

      <a-form-item key="desc" name="desc" label="备注">
        <a-textarea
          placeholder="请输入备注"
          :allowClear="true"
          v-model:value="curFormData.desc"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, unref, computed, watch } from 'vue'
import { useComDesignStoreWithOut } from '@/store'

import BwEmitParams from './param.vue'
interface BwComEmitInfoProps {
  visible: boolean
}

const designStore = useComDesignStoreWithOut()
const emit = defineEmits(['update:visible', 'ok'])
const props = withDefaults(defineProps<BwComEmitInfoProps>(), {
  visible: false,
})

const emitParam = ref()
const curFormData = ref<Record<string, any>>({})
const curVisible = computed({
  get: () => props.visible,
  set: (visible) => emit('update:visible', visible),
})
const curOptions = computed(() => {
  return {
    title: `新增外放事件信息`,
    width: 800,
    okText: '确定',
    cancelText: '取消',
    destroyOnClose: true,
  }
})

const curFormRuless = computed(() => {
  return {
    name: { required: true, message: `请填写事件名称` },
    code: { required: true, message: `请填写事件标识` },
  }
})

const onAddParam = () => {
  curFormData.value = curFormData.value ?? {}
  const curParams = unref(curFormData).params ?? []

  curParams.push({})
  curFormData.value.params = curParams
}

const onDelParam = (index: number) => {
  const curParams = unref(curFormData).params ?? []

  curParams.splice(index, 1)
  curFormData.value.params = curParams
}

const onModalOk = () => {
  const ele = unref(emitParam)
  const curParams = ele.getParamList()

  designStore
    .onAddEmit({
      params: curParams,
      key: unref(curFormData).code,
      name: unref(curFormData).name,
      desc: unref(curFormData).desc,
      isModel: !!unref(curFormData).isModel,
    })
    .then(() => (curVisible.value = false))
}

watch(
  () => curVisible.value,
  () => {
    curFormData.value = {
      code: '',
      name: '',
      desc: '',
      isModel: false,
      params: [],
    }
  },
  { deep: true, immediate: true }
)
</script>

<style lang="less" scoped></style>
